<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.v2.jsp" %>
		<style>
		#jquery-table td{word-break: break-all;word-wrap: break-word;}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
        .clearfix:after{content:"";display:block;height:0;visibility:hidden;clear:both}
        #subForm{
            padding-top: 20px;
            border-top: 1px solid #707070;
        }
        .btn-primary[disabled]{
            background-color: #abbac3!important;
            border-color: #abbac3;
        }
        input[type=file]{
            height: auto;
        }
        #img-preview-container{
            display: inline-block;
        }
        #launchParams{
            color: #ce4844;
            word-wrap: break-word;
            word-break: break-all;
        }
        .border-red{
            border-color: red !important;
        }
		</style>
	</head>
<body class="no-skin">
<div  class="load_bg" style="display:none;" ></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
	<div class="page-content-area">
        <div class="widget-box widget-color-blue">
            <div class="widget-body">
                <div class="widget-main">
                    <form class="clearfix" id="mainForm">

                    </form>
                </div>
            </div>
        </div>
        <div id="launchParams"></div>
        <div class="row text-center" style="margin-top:27px;">
            <button class="btn btn-lg btn-success no-border" id="save">
                <i class="ace-icon fa fa-floppy-o"></i> 生成最终使用参数
            </button>
        </div>
	</div><!-- /.page-content-area -->
</div><!-- /.page-content -->

<!--模态框-->
<div class="modal fade" id="Modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body clearfix">
                <form id="addImage" method="post" enctype="multipart/form-data">
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <div class="input-group col-sm-12">
                                <input type="file" class="form-control" name="myFile" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" disabled id="confirm">上传</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<%@ include file="/common/common-js.jsp" %>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">

/**
* injectJsElement 不允许多层嵌套
* injectJsElement 不允许多层嵌套
* injectJsElement 不允许多层嵌套
**/

    $(window).on('load', function(){
        var $mainForm = $('#mainForm'),
            $body = $('body'),
            $generateInjectJsParams = $('#generate-injectJs-params'),
            $save = $('#save'),
            $confirm = $('#confirm'),
            $myFile = $('input[name="myFile"]');
        $mainForm.html(formElement + injectJsElement);
        $body.on('click', '#injectJs', function(event) {
            var $checkBox = $(this).find('input');
            if($checkBox.prop('checked')) {
                //显示injectJs所需的上传图片和其他参数界面
                var subFormElement = '<form class="clearfix" id="subForm">'
                +                        injectJsImgElement
                +                        formElement
                +                    '</form>'
                $mainForm.after(subFormElement);
                $generateInjectJsParams.prop('disabled', false);
                return;
            }
            //删除subForm
            var $subForm = $('#subForm');
            if($subForm.length > 0) {
                $subForm.remove();
            }
            $generateInjectJsParams.prop('disabled', true);
        });
        $body.on('click', '#get-img-modal', function(event) {
            $('#Modal').modal('show');
            event.preventDefault();
        });
        $myFile.on('change', function(){
			if($(this).val() != ''){
				$confirm.prop('disabled', false);
			}else{
				$confirm.prop('disabled', true);
			}
		});
        $confirm.on('click', function(){
			if($myFile.val() != ''){
				uploadImage();
			};
			return false;
		});
        $save.on('click', function(event) {
            var verifyParams = [
                {
                    selector: $('input[name="title"]'),
                    type: "input"
                },
                {
                    selector: $('input[name="htmlUrl"]'),
                    type: "input"
                }
            ];
            var $subForm = $('#subForm');
            if($subForm.length > 0) {
                verifyParams.push({
                    selector: $('#img-preview-container'),
                    type: "normal",
                    msg: "请上传图片"
                });
                if(!verify(verifyParams)) {
                    return;
                }
                var subformVal = $subForm.serializeObject();
                var params = getLaunchParamsObj(subformVal);
                params = JSON.stringify(params);
                params = "//xmiles.cn/js_css/inject/transfuse.js?img=" + window.injectJsImage + "&options=" + encodeURIComponent(encodeURIComponent(params));
                $('input[name="injectJs"]').val(params);
            }
            if(!verify(verifyParams)) {
                return;
            }
            var mainFormVal = $mainForm.serializeObject();
            var params = getLaunchParamsObj(mainFormVal, true);
            $('#launchParams').html(JSON.stringify(params));
        });
    });
    function verify(selectors) {
        var returnVal = true;
        for(var i = 0; i < selectors.length; i++) {
            var type = selectors[i].type;
            selectors[i].selector.each(function(index) {
                var val = type === 'input' ? $(this).val() : $(this).html();
                if(!val) {
                    //一个为false即返回false
                    returnVal = false;
                    $(this).addClass('border-red');
                    selectors[i].msg && alert(selectors[i].msg);
                } else {
                    $(this).removeClass('border-red');
                }
            });
        }
        return returnVal;
    }
    //获取跳转参数object的方法
    function getLaunchParamsObj(formVal, isInjectJs) {
        var params = {
            "launch": formVal.launch,
            "launchParams": {
                "title": formVal.title,
                "htmlUrl": formVal.htmlUrl,
                "clearTop": formVal.clearTop === "1" ? 1 : 0,
                "canBlockNetworkImg": formVal.canBlockNetworkImg === "1" ? 1 : 0,
                "reloadWhenLogin": formVal.reloadWhenLogin === "1" ? 1 : 0,
                "showTitle": formVal.showTitle === "1" ? 1 : 0,
                "showToolbar": formVal.showToolbar === "1" ? 1 : 0,
                "takeOverBackPressed": formVal.takeOverBackPressed === "1" ? 1 : 0,
                "withHead": formVal.withHead === "1" ? 1 : 0,
                "injectCss": formVal.injectCss === "1" ? 1 : 0
            }
        };
        if(isInjectJs) {
            params.launchParams.injectJs = formVal.injectJs;
        }
        return params;
    }
    //上传到七牛的方法
    function uploadImage() {
        var options = {
            url : "${ctx}/mall/fileupload/fileUpload.action",
            type : "POST",
            dataType : "json",
            beforeSend: function(){
                $(".load_bg,.load_img").show();
            },
            success : function(data) {
                console.log(data);
                var img = data.split('#')[0];
                if (img.indexOf('https://') === 0) {
                    img = img.slice(6, img.length);
                } else if (img.indexOf('http://') === 0) {
                    img = img.slice(5, img.length);
                }
                window.injectJsImage = img;
                $('#img-preview-container').html('<img src="' + img + '" style="width:75px;height:75px;margin-left:100px;" />');
                //隐藏模态框
                $('#Modal').modal('hide');
                //清空modal里面的input的值
                $('input[name="myFile"]').val('');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(textStatus);
            },
            complete: function(){
                $(".load_bg,.load_img").hide();
            }
        };
        $('#addImage').ajaxSubmit(options);
    }
    var formElement = '<div class="form-group col-lg-6 col-md-6 col-sm-12">'
    + '        <label class="control-label">跳转标题</label>'
    + '        <input class="form-control" type="text" name="title" value="" placeholder="请填写标题">'
    + '    </div>'
    + '    <div class="form-group col-lg-6 col-md-6 col-sm-12">'
    + '        <label class="control-label">跳转链接</label>'
    + '        <input class="form-control" type="url" name="htmlUrl" value="" placeholder="请填写链接">'
    + '    </div>'
    + '    <div class="form-group col-lg-6 col-md-6 col-sm-12">'
    + '        <label class="control-label">打开跳转的方式</label>'
    + '            <select class="form-control" name="launch">'
    + '<option value="launch_vc_webView" selected="selected">全屏Web界面</option>'
    + '    <option value="launch_vc_dialog_webview">打开Web对话框页面</option>'
    + '        <option value="launch_other_browser">全屏外部Web界面</option>'
    + '            <option value="launch_download_file">下载文件</option>'
    + '                <option value="none">无跳转</option>'
    + '        </select>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '        <label class="control-label">'
    + '            销毁原界面'
    + '            <input type="checkbox" value="1" name="clearTop" />'
    + '        </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '        <label class="control-label">'
    + '            限制网络图片加载'
    + '            <input type="checkbox" value="1" name="canBlockNetworkImg" />'
    + '        </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '    <label class="control-label">'
    + '        登录重新加载'
    + '            <input type="checkbox" value="1" name="reloadWhenLogin" checked />'
    + '    </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '    <label class="control-label">'
    + '        html页面接管返回键的处理'
    + '        <input type="checkbox" value="1" name="takeOverBackPressed" />'
    + '    </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '    <label class="control-label">'
    + '        resume和pause时回调页面'
    + '        <input type="checkbox" value="1" name="callbackWhenResumeAndPause" />'
    + '        </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '        <label class="control-label">'
    + '        显示标题栏'
    + '        <input type="checkbox" value="1" name="showTitle" checked />'
    + '    </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '        <label class="control-label">'
    + '            注入xmiles_inject.css'
    + '        <input type="checkbox" value="1" name="injectCss" />'
    + '    </label>'
    + '    </div>'
    + '    <div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '    <label class="control-label">'
    + '    带协议头'
    + '            <input type="checkbox" value="1" name="withHead" checked />'
    + '</label>'
    + '</div>'
    + '<div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '    <label class="control-label">'
    + '    显示工具栏'
    + '    <input type="checkbox" value="1" name="showToolbar" />'
    + '</label>'
    + '</div>';
    var injectJsElement = '<div class="form-group col-lg-3 col-md-3 col-sm-12">'
    + '<label class="control-label" id="injectJs">'
    + '注入js'
    + '<input type="checkbox" value="1" />'
    + '<input type="hidden" name="injectJs" />'
    + '</label>'
    + '</div>';
    var injectJsImgElement = '<div class="form-group col-lg-12 col-md-12 col-sm-12">'
    +     '<label class="control-label">浮层展示图片(50*50)</label>'
    +     '<button class="btn btn-sm btn-primary" id="get-img-modal" style="margin-left: 15px;">选择</button>'
    +     '<div id="img-preview-container"></div>'
    + '</div>';
</script>

</body>
</html>
